@extends('layouts.back_stage')
@section('content')
    <style>
        .shopBg{background:#fff;overflow: hidden;margin:0 0 10px 0;}
        .tableBg{padding:30px;background:#fff;}
        .input-item{width:200px;padding-right: 0;margin-right:10px;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .el-range-editor--small.el-input__inner{width:300px;}
        .el-date-editor .el-range-separator{padding:0 15px}

        .infoTopDiv{margin-top:10px;padding:10px 30px;height:55px;background:#fff;}
        .infoTopDiv span{margin-right:50px;}
        .infoDiv{float:left;line-height:31px;}
        .infoDiv span{margin-right:50px;}
        .countInfo.el-table--mini th{padding:0;}
        ::-webkit-scrollbar {height: 8px;}
        .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td{color:red;}
        [v-cloak]{display: none;}
        .listDiv{width:100%;margin-bottom:0;}
        .row-expand-cover .el-table__expand-column .el-icon{visibility:hidden;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 class="statusLi" abc="{{$infos->status}}" style="float:left;">扫码入仓</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <audio id="music_success" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/success.mp3" type="audio/mp3"></audio>
            <audio id="music_faile" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/faile.mp3" type="audio/mp3"></audio>
            <div class="row app" id="TiaoHuo" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg shows">
                        <div class="row" v-show="showCode" style="padding:30px;height:90px;background:#fff;">
                            <label style="margin-bottom:0;">请扫描条码：</label>
                            <el-input v-model.trim="codes" class="input-item" placeholder="请扫描或输入" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <el-button type="primary" size="small" @click="sureCode">确认</el-button>
                        </div>
                        <div class="row" style="padding:30px;height:90px;background:#fff;">
                            <label>请输入条码：</label>
                            <el-input v-model.trim="small_qr" class="input-item" placeholder="请输入" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <label>请输入款号：</label>
                            <el-input v-model.trim="girard" class="input-item" placeholder="请输入" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <el-button type="primary" size="small" @click="grabble('reset')">搜索</el-button>
                            <el-button type="primary" size="small" @click="resetSou('reset')">重置</el-button>
                        </div>
                    </div>
                    <div class="tableBg">
                        <h5>汇总</h5>
                        <el-table class="countInfo" :data="countInfo" size="mini" border style="width: 100%;" @filter-change="filterChange1" :summary-method="getSummaries" show-summary>
                            <el-table-column type="index" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="brand_1" label="品牌" width="90" :resizable='false' column-key="brand_1" :filters="[{ text: 'Soyyos', value: '1' },{ text: 'SoonWord', value: '2' },{ text: '个么', value: '3' },{ text: '雏鸽', value: '4' },{ text: '听画', value: '5' },{ text: '听图', value: '6' },{ text: '欧年', value: '7' },{ text: '九两', value: '8' }]"></el-table-column>
                            <el-table-column prop="girard" label="款号" min-width="100" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_3" label="小类" min-width="100" :resizable='false'></el-table-column>
                            <el-table-column prop="color" label="颜色" min-width="70" :resizable='false'></el-table-column>

                            <el-table-column v-for="item in sizeGr"  :label="item.key76" width="70" :resizable='false'>
                                <el-table-column :label="item.key75" width="70" :resizable='false'>
                                    <el-table-column :label="item.key79" width="70" :resizable='false'>
                                        <el-table-column :label="item.key77" width="70" :resizable='false'>
                                            <el-table-column :prop="item.key_0" :label="item.key140" width="70" :resizable='false'></el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="count" label="合计/件" width="70" :resizable='false'></el-table-column>
                            <el-table-column prop="price" width="130" label="吊牌价/元" align="right" :resizable='false'></el-table-column>
                            <el-table-column prop="total_price" width="120" label="总计/元" align="right" :resizable='false'></el-table-column>
                        </el-table>
                    </div>
                    <div class="tableBg" style="margin-top:10px;">
                        <h5>扫码详情</h5>
                        <el-table :data="detailInfo" height="450" size="mini" border :row-class-name="getRowClass" @filter-change="filterChange2">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <h5>包码详情</h5>
                                        <el-table :data="props.row.packet_data" size="mini" border style="width: 100%;">
                                            <el-table-column type="index" label="序号" width="50" :resizable='false'></el-table-column>
                                            <el-table-column prop="code" label="条码" min-width="170" :resizable='false'></el-table-column>
                                            <el-table-column prop="size" label="尺码" min-width="60" :resizable='false'></el-table-column>
                                            <el-table-column prop="price" label="吊牌价/元" min-width="60" :resizable='false'></el-table-column>
                                        </el-table>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column type="index" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="small_qr" label="条码" width="170" :resizable='false'></el-table-column>
                            <el-table-column prop="brand_2" label="品牌" width="100" :resizable='false' column-key="brand_2" :filters="[{ text: 'Soyyos', value: '1' },{ text: 'SoonWord', value: '2' },{ text: '个么', value: '3' },{ text: '雏鸽', value: '4' },{ text: '听画', value: '5' },{ text: '听图', value: '6' },{ text: '欧年', value: '7' },{ text: '九两', value: '8' }]"></el-table-column>
                            <el-table-column prop="girard" label="款号" width="110" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_1" label="大类" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_2" label="中类" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_3" label="小类" :resizable='false'></el-table-column>
                            <el-table-column prop="color" width="90" label="颜色" :resizable='false'></el-table-column>
                            <el-table-column prop="size" width="60" label="尺码" :resizable='false'></el-table-column>
                            <el-table-column prop="price" width="100" label="吊牌价/元" align="right" :resizable='false'></el-table-column>
                            <el-table-column label="操作" width="50" fixed="right" :resizable='false'>
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status===1">
                                        <el-button type="text" size="small" @click="delSmallQr(scope)">删除</el-button>
                                    </div>
                                    <div v-else>
                                        <span>-</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        {{--<div class="pagination-box">--}}
                            {{--<el-pagination @current-change="changePageSkip2" :current-page="currentPage2" :total="total2" layout="prev, pager, next" background></el-pagination>--}}
                        {{--</div>--}}
                        <div class="row" style="padding:13px 0;height:57px;background:#fff;">
                            <el-button style="float:right;" type="primary" v-show="showFa" size="small" @click="overTrue">入仓完成</el-button>
                        </div>
                    </div>
                </div>
                <el-dialog title="备注信息" :visible.sync="showBox" class="add-box" width="30%">
                    <el-form :model="addAct">
                        <el-form-item label="备注" label-width="100px">
                            <el-input type="textarea" :rows="2" placeholder="请填写备注(30以内字符)" size="small" maxlength="30" v-model="addAct.remark" style="width:95%;"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="sureBtn" size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <!-- /盘点记录-->
    <script>
        new Vue({
            el: '#TiaoHuo',
            data:{
                sizeGr:[],//尺码信息
                codes:'', //条形码
           
                brand_1:'',//汇总品牌搜索
                countInfo:[], //汇总

                girardNum:'',//款号种类合计

                small_qr:'',//搜索条码
                girard:'',//搜索款号
                brand_2:"", //详情品牌搜索
                detailInfo:[], //详情
//                total2:1,  //详情总条数
//                currentPage2:1, //详情当前页数


                showFa:true,//配货完成
                showCode:true,//扫描条码
                showBox:false,//添加弹框显示隐藏
                addAct:{
                    remark:'',//备注
                },

                // 要展开的行，数值的元素是row的key值
                expands: [],
                indexId:0,

                delSmallQrFlag:true,
            },
            mounted(){
                var status=$(".statusLi").attr("abc");
                if(status==1){
                    this.showFa=true;
                    this.showCode=true;
                }else if(status==2){
                    this.showFa=false;
                    this.showCode=false;
                }
                this.common();
                this.countBble();//汇总
                this.grabble();//详情
            },
            methods:{
                /*尺码数据*/
                common(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/sizeGroupHead',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.sizeGr=data.content.vertical;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*汇总数据*/
                countBble(){
                    var that = this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/girard-count-infos',
                        data: {
                            id:'{{$id}}',
                            brand_1:this.brand_1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                let option1 = [];
                                let girardArr=[];
                                for(var value of data.content){
                                    if(girardArr.indexOf(value.girard)==-1){
                                        girardArr.push(value.girard)
                                    };
                                    var cvs=0;
                                    for(var cv=0;cv<value.nums.length;cv++){
                                        if(value.nums[cv]==''){
                                            value.nums[cv]=0;
                                        }
                                        cvs+=Number(value.nums[cv]);
                                    }
                                    var oneNum=0;
                                    var twoNum=0;
                                    if(value.nums.length==9 && value.price.indexOf("/")!=-1){
                                        for(var cc=0;cc<value.nums.length;cc++){
                                            if(value.nums[cc]==''){
                                                value.nums[cc]=0;
                                            }
                                            if(cc<7){
                                                oneNum+=Number(value.nums[cc]);
                                            }else{
                                                twoNum+=Number(value.nums[cc]);
                                            }
                                        }
                                    }
                                    option1.push({
                                        "brand_1":value.brand,
                                        "girard":value.girard,
                                        "cate_3":value.cate_3,
                                        "color":value.color,
                                        "size_group":value.size_group,
                                        "num":value.nums,
                                        "count":cvs,
                                        "price":value.price,
                                        "total_price":that.getCou(value.price , oneNum , twoNum , cvs),
                                    });
                                }
                                that.girardNum=girardArr.length;
                                that.countInfo = option1;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*总金额*/
                getCou(money,n1,n2,n3){
                    if(money.indexOf("/")!=-1){
                        let priArr=money.split("/");
                        let disOne=(priArr[0]*n1);
                        let disTwo=(priArr[1]*n2);
                        return (Number(disOne) + Number(disTwo)).toFixed(2);
                    }else{
                        return (money*n3).toFixed(2);
                    }
                },
                //详情数据
                grabble(type){
                    var that = this;
//                    let skip;
//                    if(type == 'reset'){
//                        skip = 0;
//                    }else{
//                        skip = that.currentPage2-1;
//                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/scan-code-infos',
                        data: {
//                            skip:skip,
                            id:'{{$id}}',
                            code:this.small_qr,
                            girard:this.girard,
                            brand_2:this.brand_2,
//                            index_id:this.indexId,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                let option2 = [];
//                                let i = 0;
                                for(let value of data.content.data){
//                                    i++;
                                    if(value.packet_data==undefined){
                                        option2.push({
//                                            "loop":i+(10*skip),
                                            "small_qr":value.code,
                                            "brand_2":value.brand_2,
                                            "girard":value.girard,
                                            "cate_1":value.cate_1,
                                            "cate_2":value.cate_2,
                                            "cate_3":value.cate_3,
                                            "color":value.color,
                                            "size":value.size,
                                            "price":parseFloat(value.price).toFixed(2),
                                            "status":value.status,
                                        })
                                    }else{
                                        option2.push({
//                                            "loop":i+(10*skip),
                                            "small_qr":value.code,
                                            "brand_2":value.brand_2,
                                            "girard":value.girard,
                                            "cate_1":value.cate_1,
                                            "cate_2":value.cate_2,
                                            "cate_3":value.cate_3,
                                            "color":value.color,
                                            "size":value.size,
                                            "price":value.price,
                                            "status":value.status,
                                            "packet_data":value.packet_data,
                                        })
                                    }

                                }
                                that.detailInfo = option2;
//                                that.indexId=data.content.index_id;
//                                that.total2 = data.content.total;
//                                that.currentPage2 = data.content.skip;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*重置详情*/
                resetSou(){
                    this.small_qr='';
                    this.girard='';
                    this.brand_2='';
                    this.grabble('reset');
                },
                /*详情分页*/
//                changePageSkip2(val){
//                    this.currentPage2 = val;
//                    this.grabble();
//                },
                /*汇总品牌搜索*/
                filterChange1(filters){
                    var fil=filters.brand_1;
                    var stas='';
                    for(var d=0;d<fil.length; d++){
                        stas=stas+fil[d]+',';
                    }
                    this.brand_1=stas.substr(0, stas.length - 1);
                    this.countBble();
                },
                /*详情品牌搜索*/
                filterChange2(filters){
                    var fil=filters.brand_2;
                    var stas='';
                    for(var d=0;d<fil.length; d++){
                        stas=stas+fil[d]+',';
                    }
                    this.brand_2=stas.substr(0, stas.length - 1);
                    this.grabble('reset');
                },
                /*删除条码*/
                delSmallQr(scope){
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确定删除该款商品?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.delSmallQrFlag==true){
                                    that.delSmallQrFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/distribution/code-del',
                                        data: {
                                            id:'{{$id}}',
                                            code:scope.row.small_qr,
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: data.content
                                                });
                                                done();
                                                that.grabble('reset');
                                                that.countBble();//汇总
                                                that.delSmallQrFlag=true;
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.delSmallQrFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*配货完成*/
                overTrue() {
                    this.showBox = true;
                    this.addAct.remark = '';
                },
                /*完成确定*/
                sureBtn(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/stock-complete',
                        data: {
                            id:'{{$id}}',
                            remark:that.addAct.remark,
                        },
                        success: function (data) {
                            if(data.result.success){
                                that.$notify.success({
                                    title: '提示',
                                    message: '入仓完成'
                                });
                                that.showBox = false;
                                that.showFa=false;
                                that.showCode=false;
                                that.countBble();//汇总
                                that.grabble('reset');//详情
                                setTimeout(function () {
                                    window.location.href='/distribution/stock-list';
                                },1000)
                            }else{
                                that.$notify.error({
                                    title: '错误',
                                    message: data.result.errorMsg
                                });
                            }
                        }
                    })
                },
                /*合计*/
                getSummaries(param) {
                    var that=this;
                    const { columns, data } = param;
                    const sums = [];
                    columns.forEach((column, index) => {
                        if (index === 0) {
                            sums[index] = '合计';
                            return;
                        }
                        const values = data.map(item => Number(item[column.property]));
                        switch (column.property) {
                            case 'girard':
                                sums[index] = that.girardNum;
                                break;
                            case 'count':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'total_price':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return ( parseFloat(prev) + parseFloat(curr) ).toFixed(2);
                                    } else {
                                        return parseFloat(prev).toFixed(2);
                                    }
                                }, 0);
                                break;
                            default:
                                break;
                        }
                    });
                    return sums
                },
                /*确认*/
                sureCode(){
                    var that=this;
                    var id='{{$id}}';
                    if(this.codes.substr(0,1)=="B") {
                        if (this.codes != '') {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-pakcet-code',
                                data: {
                                    id:id,
                                    packet:this.codes
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.codes='';
                                        that.countBble();//汇总
                                        that.grabble('reset');//详情
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }else{
                        if (this.codes != '') {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-code',
                                data: {
                                    id:id,
                                    code:this.codes
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.codes='';
                                        that.countBble();//汇总
                                        that.grabble('reset');//详情
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }

                },
                /*包码下拉，条码没有*/
                getRowClass(row, index){
                    if (!row.row.packet_data){//即改行没有子元素时，添加row-expand-cover类
                        return 'row-expand-cover';
                    }
                },
            },
            watch : {
                codes:function(val) {
                    this.codes = val;
                    var that=this;
                    var id='{{$id}}';
                    if(val.substr(0,1)=="B") {
                        if (val != '' && val.length == 17) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-pakcet-code',
                                data: {
                                    id:id,
                                    packet:this.codes
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.codes='';
                                        that.countBble();//汇总
                                        that.grabble('reset');//详情
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }else{
                        if (val != '' && val.length == 15) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-code',
                                data: {
                                    id: id,
                                    code: this.codes
                                },
                                success: function (data) {
                                    if (data.result.success) {
                                        that.codes = '';
                                        that.countBble();//汇总
                                        that.grabble('reset');//详情
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    } else {
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }
                },
            }
        });
    </script>
@endsection
